{#
 # ---------------------------------------------------------------------
 #
 # GLPI - Gestionnaire Libre de Parc Informatique
 #
 # http://glpi-project.org
 #
 # @copyright 2015-2024 Teclib' and contributors.
 # @copyright 2003-2014 by the INDEPNET Development Team.
 # @licence   https://www.gnu.org/licenses/gpl-3.0.html
 #
 # ---------------------------------------------------------------------
 #
 # LICENSE
 #
 # This file is part of GLPI.
 #
 # This program is free software: you can redistribute it and/or modify
 # it under the terms of the GNU General Public License as published by
 # the Free Software Foundation, either version 3 of the License, or
 # (at your option) any later version.
 #
 # This program is distributed in the hope that it will be useful,
 # but WITHOUT ANY WARRANTY; without even the implied warranty of
 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 # GNU General Public License for more details.
 #
 # You should have received a copy of the GNU General Public License
 # along with this program.  If not, see <https://www.gnu.org/licenses/>.
 #
 # ---------------------------------------------------------------------
 #}

<form method="post" action="#" data-submit-once>
   <div class="alert alert-info">
      <h1>{{ __('2FA Enabled') }}</h1>
      <h2>
         {% if enforcement == constant('Glpi\\Security\\TOTPManager::ENFORCEMENT_MANDATORY_GRACE_PERIOD') %}
            {{ __('2FA grace period ends %s')|format(grace_period_end|relative_datetime) }}
         {% elseif enforcement == constant('Glpi\\Security\\TOTPManager::ENFORCEMENT_MANDATORY') %}
            {{ __('Mandatory') }}
         {% else %}
            {{ __('Optional') }}
         {% endif %}
      </h2>
   </div>
   <div id="backup_codes" class="d-none py-2" style="width: fit-content;">
      <h3 class="mb-2 alert alert-warning">{{ __('Backup codes (This is the only time these will be shown)') }}</h3>
      <h4 class="mb-2">{{ __('These are one-time use codes in case your authenticator is inaccessible') }}</h4>
   </div>
   <div>
      <input type="hidden" name="_glpi_csrf_token" value="{{ csrf_token() }}">
      {% if enforcement != constant('Glpi\\Security\\TOTPManager::ENFORCEMENT_MANDATORY') %}
         <button type="submit" class="btn btn-danger" name="disable_2fa">
            {{ __('Disable 2FA') }}
         </button>
      {% else %}
         <button type="submit" class="btn btn-danger" name="reset_2fa">
            {{ __('Reset 2FA') }}
         </button>
      {% endif %}
      <button type="button" class="btn btn-outline-secondary" name="regenerate_backup_codes">
         {{ __('Regenerate backup codes') }}
      </button>
      <script>
         $(function() {
            $('#backup_codes').on('click', 'button[name="copy_backup_codes"]', function() {
                const codes = [];
                $('#backup_codes').find('td.backup-code').each(function () {
                    codes.push($(this).text());
                });
                const newline = navigator.platform.match(/Windows/) ? "\r\n" : "\n";
                navigator.clipboard.writeText(codes.join(newline));
                const btn = $(this);

                btn.find('i').removeClass('ti ti-copy').addClass('fas fa-check');
                btn.removeClass('btn-outline-secondary').addClass('btn-success');
                btn.text('{{ __('Copied') }}');
            });
            $('button[name="regenerate_backup_codes"]').on('click', function() {
               $.ajax({
                  url: CFG_GLPI.root_doc + '/ajax/2fa.php',
                  method: 'POST',
                  data: {
                      regenerate_backup_codes: 1
                  },
                  success: function(data) {
                     const codes = JSON.parse(data);
                     const backup_code_container = $('#backup_codes');
                     if (codes.length === 0) {
                        // An error occured
                        backup_code_container.html('{{ __('An error occured') }}');
                     } else {
                        //Remove any previous code table
                        backup_code_container.find('table').remove();
                        backup_code_container.append(`<table class="table table-bordered mx-auto text-center" style="width: fit-content"><tbody></tbody></table>`);
                        const table_body = backup_code_container.find('tbody');
                        $.each(codes, function(index, value) {
                           let code_item = $('<tr><td class="backup-code"></td></tr>');
                           // Stylize the codes to make them easier to read and reduce ambiguity
                           for (let i = 0; i < value.length; i++) {
                              if (isNaN(value[i])) {
                                 if (value[i] === value[i].toUpperCase()) {
                                    code_item.find('td').append($('<u></u>').text(value[i]));
                                 } else {
                                     code_item.find('td').append(value[i]);
                                 }
                              } else {
                                  code_item.find('td').append($('<span></span>').addClass('text-info').text(value[i]));
                              }
                           }
                            table_body.append(code_item);
                        });
                        table_body.append(`<tr><td>
                            <button class="btn btn-outline-secondary" type="button" name="copy_backup_codes">
                                <i class="ti ti-copy"></i>
                                {{ __('Copy backup codes') }}
                            </button>
                        </td></tr>`);
                     }
                     backup_code_container.removeClass('d-none');
                  },
                  error: function() {
                     const backup_code_container = $('#backup_codes');
                     backup_code_container.html('{{ __('An error occured') }}');
                     backup_code_container.removeClass('d-none');
                  }
               });
            });
            {% if regenerate_backup_codes %}
             $('button[name="regenerate_backup_codes"]').trigger('click');
            {% endif %}
         });
      </script>
   </div>
</form>
